<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据分析</el-breadcrumb-item>
            <el-breadcrumb-item>直播分析</el-breadcrumb-item>
        </el-breadcrumb>

<div style="margin-bottom: 20px">
      <p style="text-align: left;padding-bottom: 5px"><span style="font-weight: bold;font-size: 18px">数据总览</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 12px">近30次直播的数据统计</span></p>
      <el-row :gutter="12" >
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">直播间访问量：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveViews }}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">直播间浏览量：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveVisitor}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">累计观看人数：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveVisitorSum}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">累计观看人次：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveViewsSum}}</p>
          </el-card>
        </el-col><el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">人均观看时长：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveAverage}}</p>
        </el-card>
      </el-col>
      </el-row>

      <el-row :gutter="12" style="margin-top: 20px">
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">点赞量：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveGoodCount}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">评论数：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveCommentCount}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">打赏人次：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveRewardCount}}</p>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
            <p style="font-size: 14px;margin:0 0">打赏金额(元)：</p>
            <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">{{this.liveRewardMoney}}</p>
          </el-card>
        </el-col>
      </el-row>

</div>


        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播分析</h3>
              <div id="myChart1" :style="myChartStyle" ></div>
        </el-card>


      <el-card style="margin-top: 30px">
            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播数据</h3>
            <el-table :data="liveDataList" border stripe>
              <el-table-column label="直播信息" prop="live.livename"></el-table-column>
              <el-table-column label="直播间浏览量" prop="liveViews"></el-table-column>
              <el-table-column label="直播间访客数" prop="liveVisitor"></el-table-column>
              <el-table-column label="累计观看人次" prop="liveVisitorSum"></el-table-column>
              <el-table-column label="累计观看人数" prop="liveViewsSum"></el-table-column>
              <el-table-column label="平均观看时长" prop="liveAverage"></el-table-column>
              <el-table-column label="最高在线人数" prop="liveHighestVisitor"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                total: 0,
                liveDataList:[],
                liveSumDataList:[],

              xData: [], //横坐标
              yData: [], //昨日数据
              aData:[],//前天数据
              bData:[],//前天数据
              myChart: {},
              myChartStyle: { float: "left", width: "100%", height: "500px" },//图表样式


              liveViews:0,
              liveVisitor:0,
              liveVisitorSum:0,
              liveViewsSum:0,
              liveAverage:0,
              liveGoodCount:0,
              liveCommentCount:0,
              liveRewardCount:0,
              liveRewardMoney:0
            };
        },
      mounted() {
        this.initEcharts();
      },
        methods: {
          handleSizeChange(newSize){
            this.size=newSize;
            this.getLiveData();
          },
          handleCurrentChange(newPage){
            this.pageNum=newPage;
            this.getLiveData();
          },
          initEcharts() {
            const option = {
              title:{
                text:"近三日直播间每小时在线人数"
              },
              legend:{
                data:['昨日','前日','大前日']
              },
              xAxis: {
                data: this.xData
              },
              yAxis: {},
              series: [
                {
                  name:"昨日",
                  data: this.yData,
                  type: "bar" // 类型设置为柱状图
                },
                {
                  name:"前日",
                  data: this.aData,
                  type: "bar" // 类型设置为柱状图
                },
                {
                  name:"大前日",
                  data: this.bData,
                  type: "bar" // 类型设置为柱状图
                }
              ]
            };
            this.myChart = this.$echarts.init(document.getElementById("myChart1"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.myChart.resize();
            });
          },
          queryLiveOnlineDateByDays(){   //获得柱状图数据
            let url = "liveDateVo/queryLiveOnlineDateByDays";
            this.$axios.get(url,{
              params:{
                  days:48
              }
                }
            ).then(res=>{
              if (res.data.code == 200){
                let liveOnlineDate=res.data.data;
                for(let i=0;i<16;i++){
                  this.xData.push(liveOnlineDate[i].timeDate)
                  this.yData.push(liveOnlineDate[i].onlineNum)
                }
                for(let j=16;j<32;j++){
                  this.aData.push(liveOnlineDate[j].onlineNum)
                }
                for(let k=32;k<48;k++){
                  this.bData.push(liveOnlineDate[k].onlineNum)
                }
                this.initEcharts();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          getLiveSumData(){
            let url = "liveDateVo/queryLiveData";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200) {
                console.log(res)
                this.liveSumDataList = res.data.data;
                this.liveViews=this.liveSumDataList[0].liveviews;
                this.liveVisitor=this.liveSumDataList[0].livevisitor;
                this.liveVisitorSum=this.liveSumDataList[0].livevisitorsum;
                this.liveViewsSum=this.liveSumDataList[0].liveviewssum;
                this.liveAverage=this.liveSumDataList[0].liveaverage;

                this.liveGoodCount=this.liveSumDataList[0].livegoodcount;
                this.liveCommentCount=this.liveSumDataList[0].livecommentcount;
                this.liveRewardCount=this.liveSumDataList[0].liverewardcount;
                this.liveRewardMoney=this.liveSumDataList[0].liverewardmoney;

              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          },
            getLiveData(){
              let url = "liveDateVo/queryAllLiveDateVoByPage";
              this.$axios.get(url, {
                params:{
                  now:this.pageNum,
                  size:this.pageSize,
                }
              }).then(res=>{
                if (res.data.code == 200) {
                  this.liveDataList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else{
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            reloadData() {
              this.queryLiveOnlineDateByDays();
              this.getLiveData();
              this.getLiveSumData();
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>